<template>
  <div class="customer-page-container">
    <!-- 标题区域 -->
    <div class="header-title">
      <h3>乘客用户列表</h3>
    </div>

    <!-- 表格区域 -->
    <el-table :data="pageState.tableData" class="customer-table" stripe>
      <el-table-column label="ID" prop="id" width="200" align="center" show-overflow-tooltip />
      <el-table-column label="乘客姓名" prop="passengerName" width="150" align="center" />
      <el-table-column label="手机号" prop="passengerPhone" width="180" align="center" />
      <el-table-column label="性别" prop="passengerGender" width="100" align="center">
        <template #default="scope">
          <span>{{ formatGender(scope.row.passengerGender) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
            {{ formatState(scope.row.state) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="注册时间" prop="gmtCreate" align="center" show-overflow-tooltip />
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="pageState.pagination.total"
        :page-size="pageState.pagination.size"
        :current-page="pageState.pagination.current"
        @current-change="fetchData" />
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

// 创建 Axios 实例，请根据您的实际后端地址修改 baseURL
const api = axios.create({
  baseURL: 'http://172.172.9.24:8090/api-boss',
  timeout: 5000
});

// 使用 reactive 创建响应式状态对象
const pageState = reactive({
  // 表格数据
  tableData: [],
  // 分页信息
  pagination: {
    current: 1,
    size: 5, // 初始每页显示数量，与后端接口对应
    total: 0,
  },
});

// 组件挂载后立即获取第一页数据
onMounted(() => {
  fetchData(1);
});

/**
 * 获取乘客数据
 * @param {number} currentPage - 要获取的页码
 */
const fetchData = (currentPage) => {
  if (currentPage) {
    pageState.pagination.current = currentPage;
  }

  // 准备请求参数
  const params = {
    current: pageState.pagination.current,
    size: pageState.pagination.size,
  };

  console.log("查询参数:", params);

  // 使用 GET 方法调用查询接口
  api.get("/passenger/selectAll", { params: params }).then(res => {
    console.log("查询结果:", res.data);
    // 根据后端返回的数据结构进行处理
    if (res.data && res.data.code === 1) {
      const responseData = res.data.data;
      pageState.tableData = responseData.records || [];
      pageState.pagination.total = responseData.total || 0;
      pageState.pagination.current = responseData.current || 1;
      pageState.pagination.size = responseData.size || 5;
    } else {
      ElMessage.error(res.data.message || '数据加载失败');
      pageState.tableData = [];
      pageState.pagination.total = 0;
    }
  }).catch(error => {
    console.error("查询请求失败:", error);
    ElMessage.error("请求失败，请检查网络或联系管理员");
    pageState.tableData = [];
    pageState.pagination.total = 0;
  });
};

/**
 * 格式化性别显示
 * @param {number} genderCode - 性别代码 (0 或 1)
 * @returns {string} - 性别中文描述
 */
const formatGender = (genderCode) => {
  switch (genderCode) {
    case 0:
      return '男';
    case 1:
      return '女';
    default:
      return '未知';
  }
};

/**
 * 格式化状态显示
 * @param {number} stateCode - 状态代码
 * @returns {string} - 状态中文描述
 */
const formatState = (stateCode) => {
  return stateCode === 0 ? '有效' : '无效';
};

</script>

<style>
/* 样式部分直接复用您提供的样式，确保视觉风格一致 */
.customer-page-container {
  padding: 15px;
  background-color: rgba(45, 55, 72, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  color: #cdd6e8;
  min-height: calc(100vh - 77px - 40px);
}

.header-title {
  color: #e5e7eb;
  margin-bottom: 15px;
  padding-left: 5px;
}

.customer-table {
  background-color: rgba(31, 41, 55, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 4px;
  overflow: hidden;
  width: 100%; /* 确保表格宽度为100% */
}

.customer-table .el-table__header-wrapper th {
  background-color: rgba(55, 65, 81, 0.75) !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid rgba(75, 85, 99, 0.6) !important;
  padding: 10px 0 !important;
  vertical-align: middle;
  text-align: center;
}

.customer-table .el-table__row {
  background-color: transparent !important;
  color: #cdd6e8 !important;
}

.customer-table .el-table__row:hover > td {
  background-color: rgba(45, 55, 72, 0.5) !important;
  color: #ffffff !important;
}

.customer-table .el-table__row.el-table__row--striped > td {
  background-color: rgba(37, 48, 65, 0.3) !important;
}

.customer-table .el-table__row.el-table__row--striped:hover > td {
  background-color: rgba(45, 55, 72, 0.5) !important;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next {
  background-color: rgba(55, 65, 81, 0.8) !important;
  color: #d1d5db !important;
  border: 1px solid rgba(75, 85, 99, 0.7);
}

.el-pagination.is-background .el-pager li:not(.is-disabled):hover {
  color: #ffffff !important;
  background-color: #3b82f6 !important;
}

.el-pagination.is-background .el-pager li.is-active {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
  border-color: #3b82f6;
}

.el-pagination .el-pagination__total {
  color: #cdd6e8 !important;
}
</style>
